import { Button, Input, Modal, Space } from '@arco-design/web-react'
import React, { useState } from 'react'
import FileManager from '../FileManager'
import { TableData } from '../FileManager/components/FileTable';

type Props = {
  value?: TableData[],
  onChange?: (value: TableData[]) => void,
  multiple: boolean,
  accept?: string, // 用于指定可选择的文件类型，例如 ".jpg,.png,.gif"
  maxCount?: number // 用于指定可选择的文件最大数量
}

const FileSelector = ({ value, onChange, multiple, accept, maxCount }: Props) => {
  const [visible, setVisible] = useState(false);
  const [selectedRows, setSelectedRows] = useState<TableData[]>(value || [])

  const handleConfirm = () => {
    onChange?.(selectedRows)
    setVisible(false)
  }

  return (
    <>
      
      <Button onClick={() => setVisible(true)}>选择文件</Button>
      <Modal
        style={{
          width: '80vw',
          height: '80vh',
          overflow:"auto"
        }}
        
        title="选择文件"
        visible={visible}
        footer={null}
        onCancel={() => setVisible(false)}
        // onCancel={() => setVisible(false)}
        // onOk={() => setVisible(false)}
      >
        <Space size="medium" className={"w-full"} direction="vertical">
          <FileManager style={{
            height: "60vh",
            overflow:"auto"
          }}
          tableProps={{
            rowSelection: {
              type: multiple ? 'checkbox' : 'radio',
              onSelect(selected, record, selectedRows) {
                console.log(selected, record, selectedRows);
                // 如果指定了 maxCount，且用户尝试选择超过限制的数量，则不更新选择
                if (maxCount && selected && selectedRows.length > maxCount) {
                  // 保持原来的选择状态
                  return;
                }
                setSelectedRows(selectedRows)
              },
              selectedRowKeys: selectedRows.map(item => item.key),
              checkboxProps: (record) => {
                // 检查是否是目录，目录通常不受到 accept 限制
                if (record.isDirectory) {
                  // 如果已达到最大选择数量，禁用未选中的目录
                  if (maxCount && selectedRows.length >= maxCount && !selectedRows.some(row => row.key === record.key)) {
                    return { disabled: true };
                  }
                  return { disabled: false };
                }
                
                // 文件类型过滤
                let disabled = false;
                if (accept) {
                  // 解析 accept 字符串为数组
                  const acceptTypes = accept.split(',').map(type => type.trim().toLowerCase());
                  // 获取文件扩展名
                  const fileExt = (record.ext || '').toLowerCase();
                  // 检查文件扩展名是否匹配
                  disabled = !acceptTypes.some(type => {
                    // 支持通配符 *
                    if (type === '*') return true;
                    // 支持 .ext 格式
                    if (type.startsWith('.') && fileExt === type) return true;
                    // 支持 ext 格式
                    if (!type.startsWith('.') && fileExt === `.${type}`) return true;
                    return false;
                  });
                }
                
                // 数量限制检查
                if (!disabled && maxCount && selectedRows.length >= maxCount && !selectedRows.some(row => row.key === record.key)) {
                  disabled = true;
                }
                
                return { disabled };
              },
            
            },
          }}
          />
          <div className="flex w-full">
            <Input disabled value={'已选文件：'+selectedRows.map(item => item.name).join(',')} />
            <Button type="primary" onClick={handleConfirm}>确认选择</Button>
          </div>
        </Space>
      </Modal>
    </>
  )
}

export default FileSelector